<template>
  <div id="upload">
    <el-upload
      class="upload-demo"
      :action="url"
      :on-error="error"
      :on-success="update"
      :before-upload="checkSize"
      :show-file-list="false"
      >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
    </el-upload>
  </div>
</template>
<script>
import { api } from 'api/common'
/*
 *  上传成功后父组件通过getImgInfo方法获得服务器图片信息
*/
export default {
  data() {
    return {
      url: api.postUploadImg
    }
  },
  methods: {
    checkSize(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    update(files) {
      this.$emit('success', files.result)
    },
    error(parm) {
      this.$alert('请求错误', '提示')
    }
  }
}
</script>
<style lang="scss" scoped>
  #upload {
    .el-upload__tip{
      display: inline-block;
      margin-left:10px;
    }
  }
</style>

